<script setup lang="ts">
import { ElConfigProvider } from "element-plus";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import * as echarts from "echarts";
import { provide, onMounted } from "vue";
import { useControlPanel } from "@/store/controlPanel";
import { storeToRefs } from "pinia";
let { homeLoading } = storeToRefs(useControlPanel()); //简单数据类型解构后需要使用storeToRefs才能响应式
// echarts
provide("echarts", echarts);
onMounted(() => {
  // console.log(import.meta.env);
  window.onblur = function () {
    // console.log("失去焦点");
    document.title = "😂哦哟，溜溜球啦~";
  };
  window.onfocus = function () {
    // console.log("得到焦点");
    document.title = "😘欢迎肥来~";
    setTimeout(() => {
      document.title = "博客后台管理系统";
    }, 2000);
  };
});
</script>

<template>
  <div class="heightBeat" v-if="homeLoading">
    <img
      class="appLoadingImg"
      src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.nga.178.com%2Fattachments%2Fmon_202110%2F01%2Fi2Qj86-d14hZ2aT3cS18g-1yg.gif&refer=http%3A%2F%2Fimg.nga.178.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1694923720&t=04bd2ea32382b2f1ed2732be865180a9"
      alt=""
    />
  </div>
  <el-config-provider :locale="zhCn">
    <router-view />
  </el-config-provider>
</template>

<style scoped>
.heightBeat {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.appLoadingImg {
  width: auto;
  height: 100vh;
}
</style>
